<script setup>
import { ref, onMounted } from 'vue'
import { usePaintingStore } from "@/store";
import { getBackgroundImgTemplates } from "@/api/painting";
import selectHistory from "@/components/selectHistory/index.vue";

const props = defineProps({
  item: Object
})

const paintingStore = usePaintingStore();
const generationBgcV2 = paintingStore.generationBgcV2;
const oneActive = ref(0); // 场景生成&自定义生成tab选择
const active = ref(0); // 二级tab选择
const tabsList = ref([]); // 二级tab数组
const isShowHistory = ref(false) // 描述词文案历史

const getBackgroundImgTemplatesFn = async () => {
  const res = await getBackgroundImgTemplates(2);
  tabsList.value = res.data;
  generationBgcV2.sceneType = Object.values(res.data)[0][0]?.templateId
};

const textareaInput = (e) => {
  generationBgcV2.prompt = e.detail.value;
}

const activeFn = (id) => {
  generationBgcV2.sceneType = id
}

// 切换一级tab
const oneActiveFn = (id) => {
  id === 0 && (generationBgcV2.prompt = '')
  id === 1 && (generationBgcV2.sceneType = '')
  oneActive.value = id
}

onMounted(() => {
  getBackgroundImgTemplatesFn();
})
</script>

<template>
  <div class="tabs">
    <div class="navTab">
      <div class="tab" :class="{ active: oneActive === 0 }" @click="oneActiveFn(0)">
        场景生成
      </div>
      <div class="tab" :class="{ active: oneActive === 1 }" @click="oneActiveFn(1)">
        自定义生成
      </div>
    </div>
    <div class="twoTabs">
      <van-tabs v-model:active='active' animated :ellipsis="false" v-if="oneActive === 0">
        <van-tab v-for="(item, index) of tabsList" :title="index">
          <div class="style-box" :class="{ gird: item.length > 8, noTowRows: item.length <= 4 }">
            <div class="style-box-item" v-for="i of item" :class="{ active: generationBgcV2.sceneType === i.templateId }"
              @click="activeFn(i.templateId)">
              <img class="style-img" :src="i.imgUrl" mode="aspectFill" />
              <p class="style-text">{{ i.name }}</p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <div class="itemBox" v-else>
        <div class="titleBox">
          <div class="leftBox">
            <i class="leftIcon"></i>
            <p class="title">描述词</p>
          </div>
          <div class="rightBox">
            <div class="right" @click="isShowHistory = true">
              <i class="iconfont ai-icon-lishi"></i>
              <p class="closeText">文案记录</p>
            </div>
            <div class="right" @click="generationBgcV2.prompt = ''">
              <i class="iconfont ai-icon-qingchuwenben"></i>
              <p class="closeText">清除文本</p>
            </div>
          </div>
        </div>
        <!-- 文本域 -->
        <div class="textaredBox">
          <textarea class="textarea" :maxlength="500" placeholder="输入画面描述，例如：阳光明媚2，一个男孩站在大树下面，白色衬衫"
            placeholder-class="taPlaceHolder" :value="generationBgcV2.prompt" @input="textareaInput" :cursor-spacing="80">
        </textarea>
          <!-- 文本域最大输入长度 -->
          <div class="maxLength">
            {{ generationBgcV2.prompt?.length || 0 }}/500
          </div>
          <!-- 文案记录 -->
          <div class="selectHistory">
            <selectHistory v-model:show="isShowHistory" :id="item.id"></selectHistory>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.tabs {
  margin: 40rpx 0;

  .navTab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;

    .tab {
      width: 335rpx;
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 32rpx;
      font-size: 30rpx;
      letter-spacing: 1px;
      text-align: center;
      color: var(--a-three-text-color);
      font-weight: bold;
      border: 2rpx solid transparent;
    }

    >.active {
      border: 2rpx solid var(--a-main-color);
      color: var(--a-main-color);
    }
  }

  .twoTabs {
    .style-box {
      display: grid;
      grid-template-rows: repeat(2, 220rpx);
      grid-template-columns: repeat(auto-fill, 160rpx);
      grid-column-gap: 17rpx;
      grid-row-gap: 17rpx;
      overflow-x: auto;
      margin-top: 16rpx;


      &::-webkit-scrollbar {
        display: none;
      }

      .style-box-item {
        width: 170rpx;
        height: 214rpx;

        .style-img {
          display: block;
          border: 4rpx solid transparent;

          width: 154rpx;
          height: 154rpx;
          object-fit: contain;
          margin-bottom: 12rpx;
          border-radius: 30rpx;
        }

        .style-text {
          font-size: 24rpx;
          text-align: center;
          color: var(--a-one-text-color);
        }
      }

      .active {
        .style-img {
          border: 4rpx solid var(--a-main-color);
        }

        .style-text {
          color: var(--a-main-color);
        }
      }
    }

    .gird {
      grid-auto-flow: column;
    }

    .noTowRows {
      grid-template-rows: repeat(1, 210rpx);
    }

    .itemBox {

      // 一级标题类
      .titleBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20rpx 0 22rpx;

        .leftBox {
          display: flex;
          align-items: center;

          .leftIcon {
            width: 12rpx;
            height: 18rpx;
            background: var(--a-main-color);
            border-radius: 6rpx;
            margin-right: 10rpx;
          }

          .title {
            font-size: 28rpx;
            color: var(--a-one-text-color);

            label {
              font-weight: 400;
              font-size: 24rpx;
            }
          }
        }

        .rightBox {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 350rpx;

          .right {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: var(--a-three-text-color);

            .iconfont {
              margin-right: 6rpx;
            }

            &:first-child {
              margin-right: 20rpx;
            }
          }
        }
      }

      // 文本域相关类
      .textaredBox {
        position: relative;

        .textarea {
          box-sizing: border-box;
          display: block;
          width: 100%;
          height: 280rpx;
          padding: 24rpx;
          letter-spacing: 1px;
          border-radius: 20rpx;
          color: var(--a-one-text-color);
          background: var(--a-main-box-bg-color);

          /deep/.taPlaceHolder {
            color: var(--a-three-text-color);
          }
        }

        // 文本域最大长度
        .maxLength {
          position: absolute;
          bottom: 10rpx;
          right: 10rpx;
          color: var(--a-three-text-color);
          font-size: 26rpx;
        }

        // 文案记录组件类
        .selectHistory {
          position: absolute;
          top: 290rpx;
          left: 0;
        }
      }
    }
  }
}
</style>
